<template>
  <div class="myMainContainer">
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="myMain">
          <div class="titleName">案例演示</div>
          <div class="container">
            <el-input v-model="input" placeholder="请输入内容" id="zoningIds_1"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="myMain">
          <div class="titleName">参数说明</div>
          <div class="container">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="参数">
              </el-table-column>
              <el-table-column
                prop="explain"
                label="说明">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="myMain">
          <div class="titleName">使用方式</div>
          <div class="container">
            <el-table
              :data="tableData2"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="调用方法">
              </el-table-column>
              <el-table-column
                prop="explain"
                label="说明">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
/** 必须的样式 **/
import './css/style.css'
/** 必须的JS文件 **/
import zoningInfo from './js/index'
export default {
  name: 'zoningIndex',
  data () {
    return {
      input: '',
      tableData: [
        {
          name: 'id',
          explain: '唯一标识'
        }
      ],
      tableData2: [
        {
          name: 'zoningInfo("zoningIds_1")'
        },
        {
          name: 'window.zoningDataExports = this.zoningDataExports',
          explain: '回调方法，返回选择的数据及唯一的ID标识'
        }
      ]
    }
  },
  mounted () {
    zoningInfo('zoningIds_1')
    window.zoningDataExports = this.zoningDataExports
  },
  methods: {
    zoningDataExports (val, type) {
      if (val.province !== undefined) {
        this.input = val.province.name
      } else {
        this.input = ''
      }
      if (val.city !== undefined) {
        this.input = val.province.name + '/' + val.city.name
      }
      if (val.area !== undefined) {
        this.input = val.province.name + '/' + val.city.name + '/' + val.area.name
      }
      console.log(val)
    }
  }
}
</script>
